<template>
  <div class="header" ref="hea">
    <div class="userImg" @click="$router.replace('/personal')" v-if="show">
      <div v-if="user.head_img">
        <img :src="user.head_img|filtersUrl" />
      </div>
      <div v-else>
        <img src="../assets/logo.png" />
      </div>
    </div>
    <div class="userImg" @click="$router.replace('/login')" v-else>登录</div>

    <div class="login">黑马头条</div>
    <div class="iconfont iconsearch" @click="$router.push('/search')"></div>
  </div>
</template>

<script>
export default {
  props: ["show", "user"],
  data() {
    return {
      value: "",

    };
  },
  methods: {},
  mounted() {


    console.log(document.querySelector('.header').offsetHeight)
    localStorage.setItem('height', document.querySelector('.header').offsetHeight)

  }
};
</script>

<style lang="less" scoped>
.header {
  height: 60px;
  background-color: #fff;
  color: red;
  display: flex;
  text-align: center;
  line-height: 60px;
  // border-radius: 0 0 20px 20px;
  width: 100%;
  border: 2px solid #eee;
  .login {
    font-size: 20px;
    text-align: center;
    flex: 1;
    // color: ;
  }
  position: fixed;
  top: 0;
  z-index: 9000;
  // /deep/ .van-search {
  //   width: 70vw;
  //   height: 12.889vw;
  //   font-size: 4.444vw;
  // }
  // /deep/ .van-search .van-cell {
  //   padding: 1.389vw 2.222vw 1.389vw 0;
  // }
  // /deep/ .van-cell {
  //   font-size: 4vw;
  //   line-height: 6.667vw;
  // }
  // /deep/ .van-field__control {
  //   height: 6.389vw;
  //   font-size: 4vw;
  //   line-height: 6.389vw;
  // }
  // /deep/ .van-search__content {
  //   padding-left: 2.222vw;
  // }
  // /deep/ .van-field__left-icon {
  //   margin-right: 1.389vw;
  // }
  // /deep/ .van-icon-search {
  //   font-size: 4vw;
  //   width: 4.444vw;
  //   height: 6.111vw;
  // }
  // .icon {
  //   flex: 1;
  //   font-size: 14px;
  //   text-align: center;
  //   // margin-right: 10px;
  // }
  .userImg {
    // flex: 1;
    width: 12.5vw;
    height: 12.5vw;
    line-height: 12.5vw;
    margin: 7px 0 0 15px;
    font-size: 16px;
    img {
      margin: 7px 0 0 0px;
      // margin: 3.125vw 0 3.125vw 6.25vw;
      border-radius: 50%;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .iconsearch {
    font-size: 6.25vw;
    margin-right: 6.25vw;
    // flex: 1;
  }
}
</style>